<template>
    <div>
        <div class="head">
           

            <el-popover placement="bottom" width="260" trigger="click">
                <div>
                    <img src="../img/tx.jpg" alt="" class="tcc-img">

                    <div class="tag-q">
                        <div class="tag-admin">
                        
                            <el-tag type="success">Ademin</el-tag>
                        </div>
                        <div style="text-align: center;">
                            <el-tag type="info"> 2024-12-18 14:35:25</el-tag>

                        </div>
                    </div>
                    <div style="padding: 10px 0;
    margin: 0 -12px -12px;
    display: flex
;
    justify-content: space-around;">
                        <div>
                            <el-button type="primary" @click="open" plain>退出</el-button>
                        </div>
                        <div>
                            <el-button type="danger" plain>个人资料</el-button>
                        </div>


                    </div>

                </div>
                <img slot="reference" class="tx" width="40px" src="../img/tx.jpg" alt="">
            </el-popover>
            <el-tooltip class="item" effect="dark" content="这是个放大按钮" placement="left">
                <i class="el-icon-full-screen" style="position: absolute; right: 180px; top:20px"
                    @click="handleFullScreen"></i>
            </el-tooltip>

         <div class="tc">
          <el-tag style="margin-top: -15px;">Ademin</el-tag>
         </div>

            <el-tooltip class="item" effect="dark" content="这是个刷新按键" placement="left">
                <i class="el-icon-refresh-right" @click="refreshPage"></i>
            </el-tooltip>


        </div>
        <div class="main">
            <div class="main-left">
            <mymenuu></mymenuu>
            </div>
            <div class="main-body">
                <div class="body-nav">
                    <div class="body-navv">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div>
                        <el-page-header @back="goBack" content="详情页面">
                        </el-page-header>
                    </div>
                </div>
                <div class="and">
                    <el-skeleton style="width:90%" :loading="loading" :rows="10">
                        <router-view>``</router-view>
                    </el-skeleton>

                </div>
            </div>
        </div>
    </div>
</template>
<style>
.tag-admin {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none !important;
    padding: 8px;
}

.tcc-img {
    width: 70px;
    display: block;
    width: 100px;
    border-radius: 50px;
    margin: 0 auto;
}

.tag-q {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

.el-page-header {
    display: flex;

    line-height: 29px;
    padding: 8px;
}

.el-icon-refresh-right {
    position: absolute;
    right: 220px;
    font-size: 20px;
    top: 18px;

}


.tc {
    padding: 10px;
    position: absolute;
    right: 20px;
    top: 10px;
    text-decoration: none;

}

.and {
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 16px;
    border-radius: 3px;
    overflow-y: auto;
    height: calc(100vh - 61px - 78px);
    background-color: #fff;
    margin-top: 15px;
    padding: 10px;
}

.tx {
    border-radius: 20PX;
    position: absolute;
    padding: 10px;
    right: 100px;
}



body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f3f3f3;
    overflow: hidden;
}

.head {
    height: 60px;
    background-color: #fff;
    width: 100vw;
}

.main {
    width: 100vw;
    height: calc(100vh - 60px);
    display: flex;
}

.main-left {
    height: 100vh;
    width: 200px;
    padding: 8px;
    /* background-color: #fff; */
    /* box-shadow: 0px 10px 35px 14px rgba(0, 0, 0, 0.1); */
    /* border-radius: 10px; */

}

.main-body {
    flex: 1;
    margin-left: 10px;
    padding-right: 10px;
}

.body-navv {
    padding-top: 10px;
    position: absolute;
    right: 50px;
    top: 77px;
}


.body-nav {
    margin-top: 10px;
    height: 50px;
    width: 100%;
    background-color: #fff;


}
</style>
<script>
import mymenuu from '@/components/layout/menu.vue'
export default {
    data:()=> {
        return {
            loading: true,
            msg:''
        }

    },
   components:{
    mymenuu
   },
    mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 500);
    },
    methods: {
       
        refreshPage() {
            window.location.href = window.location.href
        },
        goToAboutPage() {
            this.$router.push('/tere');
        },
        goHome() {
            this.$router.push('/home')
        },
        goBack() {
            this.$router.back();
        },
        open() {//退出
            const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 5000);
      
            this.$confirm('确认退出吗?', '提示', {
                confirmButtonText: '确定',                    
                cancelButtonText: '取消', 
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '退出成功!',
                    
                });
                location.href = '/login';
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '退出失败'
                });
            });


        },
        handleFullScreen() {
            const element = document.documentElement;
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        },


    },

}


//缩放



</script>